<template>
  <!-- 活动规则弹窗 -->
  <view class="mode">
    <view
      class="rule-content"
      :style="{
        backgroundImage: `url(${oss2('others/ultraman/rule_bg.png')})`,
      }"
    >
      <view
        class="rule-title"
        :style="{
          backgroundImage: `url(${oss2('others/ultraman/rule_title.png')})`,
        }"
      ></view>
      <view class="rule-text">
        <image mode="widthFix" :src="oss2('others/ultraman/rule_txt.png')" />
      </view>

      <view class="rule_close" @click.stop="closePopup"></view>
    </view>
  </view>
</template>

  <script setup>
import { oss2 } from "@/utils/utils";
import { defineEmits } from "vue";

const emits = defineEmits(["close"]);

const closePopup = () => {
  getApp().emdlz2(
    "track",
    "event",
    "ultraman_campaign_activity_rule",
    "click",
    "pop_up_close",
    ""
  );
  emits("close");
};
</script>

  <style lang="less" scoped>
.mode {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 98;
  background-color: rgba(10, 28, 108, 0.7);
  .rule-content {
    position: absolute;
    width: 375px;
    height: 540px;
    top: calc(50vh - 240px);
    left: 0;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 375px 100%;
    box-sizing: border-box;
    padding-top: 61px;
    .rule-title {
      width: 100%;
      height: 90px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 130px 100%;
      margin-bottom: 10px;
    }
    .rule-text {
      width: 264px;
      height: 285px;
      margin: 0 auto;
      overflow-y: auto;
      image {
        width: 264px;
      }
    }
    .rule_close {
      position: absolute;
      top: 20px;
      right: 45px;
      width: 40px;
      height: 40px;
      background-color: transparent;
    }
  }
}
</style>

